<template>
  <div class="footer">
    <div class="footer_warp">
      <div class="footer_item">
        <div class="footer_item_i">
          <h4>产品</h4>
          <ul>
            <li>
              <a href="#">WhatsApp拓客</a>
            </li>
            <li>
              <a href="#">Facebook拓客</a>
            </li>
            <li>
              <a href="#">51客服系统</a>
            </li>
            <li>
              <a href="#">海外引流推广</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer_item">
        <div class="footer_item_i">
          <h4>出海资讯</h4>
          <ul>
            <li>
              <a href="#">WhatsApp</a>
            </li>
            <li>
              <a href="#">Facebook</a>
            </li>
            <li>
              <a href="#">51客服系统</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer_item">
        <div class="footer_item_i">
          <h4>最新文章</h4>
          <ul>
            <li>
              <a href="#">如何正确使用翻...</a>
            </li>
            <li>
              <a href="#"> TikTok运营狂揽... </a>
            </li>
            <li>
              <a href="#">WhatsApp账号</a>
            </li>
            <li>
              <a href="#">WhatsApp筛选系...</a>
            </li>
            <li>
              <a href="#">TikTok运营狂揽...</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="footer_item">
        <div class="footer_item_i">
          <h4>关于我们</h4>
          <ul>
            <li>
              <router-link to="/we">联系我们</router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer_middle">
      <div class="footer_item">
        <div class="footer_item_warp">
          <h4>
            <router-link to="/we">联系我们</router-link>
          </h4>
        </div>
      </div>
      <div class="footer_item">
        <div class="footer_item_warp">
          <div class="footer_top">
            <p>51出海</p>
            <p>飞机官方频道</p>
          </div>
          <div class="footer_image">
            <a href="https://t.me/www51ch" target="_blank">
            <img
              src="@/assets/Productpage_51/contact_tg_qrcode.png"
              alt=""
            />
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="footer_friendship">
      <p><a href="http://dh.51ch.cc" target="_blank">友情链接：全球社交流量导航</a></p>
    </div>
    <div class="footer_statement">
      <p>
        &copy;2017-2021出海-海外引流增长与营销工具-声明：网站上的服务均为第三方提供，与51出海无关。请用户注意甄别服务质量，避免上当受骗
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "footerview",
};
</script>

<style scoped>
.footer_middle{
  display: flex;
  max-width: 1160px;
  margin: 0 auto;
}
.footer_item_warp .footer_top {
  margin-bottom: 20px;
  width: 102px;
  text-align: center;
  color: #d1d4da;
  font-size: 14px;
}

.footer_statement > p {
  text-align: center;
  color: #d1d4da;
  font-size: 12px;
  padding-bottom: 20px;
}

.footer_friendship {
  padding: 0 0 14px 250px;
}

.footer_image img {
  width: 100%;
}

.footer_image {
  width: 102px;
}

.footer_item_warp {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

.footer_item_warp > p {
  margin-bottom: 20px;
  width: 102px;
  text-align: center;
}

.footer_item_i > ul > li {
  margin-top: 12px;
}

.footer_item_i > ul > li > a,
.footer_item_warp > p,
.footer_friendship > p > a {
  color: #d1d4da;
  font-size: 14px;
}

.footer_item_i > h4,
.footer_item_warp > h4 > a {
  font-size: 18px;
  color: #fff;
}

.footer_item {
  width: 290px;
  padding: 0px 0 15px 0px;
}

.footer_warp,
.footer_friendship {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.footer {
  background: #1d2845;
  padding-top: 40px;
}
</style>
